<template>
  <div class="role_admin_box">
    <div class="add_btn_top">
      <div class="sw_btn_box">
        <div
          :style="{
            color: switchText == '显示筛选' ? '#666666' : '#409EFF',
            fontSize: '14px',
          }"
        >
          {{ switchText }}
        </div>
        <el-switch
          v-permission="[4, 'switch']"
          style="margin-left: 10px"
          active-color="#2680D2"
          v-model="isShowScreen"
        >
        </el-switch>
      </div>
    </div>
    <div class="role_admin" v-permission="[4, 'list']">
      <el-row
        :gutter="20"
        v-if="tableData && tableData.length !== 0"
        v-init-screen-h
        :style="{
          width: '100%',
          background: '#fff',
        }"
      >
        <el-col
          style="margin-bottom: 20px"
          :lg="{ span: '4-8' }"
          :md="8"
          :sm="12"
          :xs="24"
          v-for="(item, index) in tableData"
          :key="item.id"
        >
          <div class="item">
            <div class="content">
              <div class="item_left_index">
                {{ index + 1 }}
              </div>
              <div class="item_right">
                <div class="top">
                  <span
                    class="el-icon-date"
                    style="font-size: 14px; margin-right: 6px"
                  ></span>
                  <span style="font-size: 14px">
                    {{ item.title }}
                  </span>
                </div>
                <div class="bottom">
                  <span
                    class="el-icon-s-operation"
                    style="font-size: 14px; margin-right: 6px"
                  ></span>
                  <span> 父ID序号:{{ item.pid }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>

      <empty-data
        v-if="tableData && tableData.length == 0"
        v-init-screen-h
      ></empty-data>
      <Pagination
        @pagination="pagination"
        :total="total"
        :page.sync="pageNum"
        :limit.sync="pageSize"
        :pageSizes.sync="pageSizes"
      />
    </div>
    <div v-if="isShowScreen" class="searchForm">
      <div style="width: 100%" v-init-screen-h>
        <div class="select">筛选</div>
        <div class="">
          <div class="searchText">菜单名称</div>
          <el-input
            class="inputStyle"
            v-model="form.title"
            clearable
            size="mini"
            placeholder="请输入菜单名称"
          >
          </el-input>
        </div>
      </div>
      <div class="bottomBtn">
        <el-button class="reset" size="mini" style="width: 50%" @click="reSet"
          >重置</el-button
        >
        <el-button
          @click="init"
          class="submit"
          size="mini"
          style="width: 50%"
          type="primary"
          >提交</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
import "@/assets/style/deviceCss/filterWindow.css";
import Pagination from "@/views/common/page";
import { getMenuList } from "@/api/userAuth";
import emptyData from "@/views/common/emptyData";
import { paginationMixins } from "@/mixin/pagination";
import _ from "lodash";
export default {
  components: {
    Pagination,
    emptyData,
  },
  computed: {},
  mixins: [paginationMixins],
  data() {
    return {
      isShowScreen: false,
      tableData: [],
      switchText: "显示筛选",
      form: {
        title: "",
      },
    };
  },
  mounted() {
    this.init();
    // this.getAssettypes();
  },
  methods: {
    reSet() {
      this.form.title = "";
      this.init();
    },
    async init() {
      getMenuList({
        pageSize: this.pageSize,
        page: this.pageNum,
        title: this.form.title,
      }).then((res) => {
        this.switchText = this.form.title ? "显示筛选(已筛选)" : "显示筛选";
        const { data } = res.data;
        console.log("res :>> ", data);
        this.total = data.total;
        this.tableData = data.list;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";
.role_admin_box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .sw_btn_box {
    display: flex;
    align-items: center;
  }
}
.role_admin {
  position: relative;
  padding: 20px;
  padding-bottom: 0;
  background-color: #fff;
  width: 100%;
  .item {
    /* display: flex; */
    border: 1px solid #e4e4e4;
    border-radius: 2px;
    /* padding: 0 10px; */
    &:hover {
      /* 列表选中样式 */
      cursor: pointer;
      background-color: #f3f9ff;
      border: 1px solid rgba(38, 128, 210, 1);
    }
    .content {
      display: flex;

      .item_right {
        width: 100%;

        .top {
          @include textoverflow(1);
          display: flex;
          align-items: center;
          font-size: 14px;
          color: #333;
          padding: 15px 0;
          padding-left: 10px;
          border-bottom: 1px solid #e8e8e8;
        }
        .bottom {
          display: flex;
          align-items: center;
          font-size: 14px;
          color: #333;
          padding: 15px 0;
          padding-left: 10px;
        }
      }

      .item_left_index {
        width: 20%;
        background-color: #f0f6fd;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #333333;
        font-size: 14px;
      }
    }
  }
}
</style>
